<%@ page import="java.util.List" %>
<%@ page import="com.google.appengine.api.datastore.Entity" %>
<%@ page import="java.util.*" %>
<%@ page contentType="text/html; charset=utf-8" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<title>Asiana datagrid</title>
    <link rel="stylesheet" type="text/css" href="/easyui/themes/gray/easyui.css">
	<link rel="stylesheet" type="text/css" href="/easyui/themes/icon.css">
	<link rel="stylesheet" type="text/css" href="/easyui/demo/demo.css">
	<script type="text/javascript" src="/easyui/jquery-1.8.0.min.js"></script>
	<script type="text/javascript" src="/easyui/jquery.easyui.min.js"></script>
	<script type="text/javascript" src="/easyui/datagrid-detailview.js"></script>
	<script type="text/javascript">
	function editDataGrid(gridElm,num){
		var row = $('#historyGrid').datagrid('getSelected');		
		if (row){
			$('#fm').form('load',row);
			//url = '/fx/select/'+row.symbol;
		}    		
    }  	
    $(function(){
        // ---------------------------------------------------------------------------
        // User List                
        $('#historyGrid').datagrid({
            url:'/fx/history.json',	
            columns:[[  ///addTicket/{ticket}/{symbol}/{trend}/{lots}/{price}
                {field:'ticket',title:'ticket',width:100},
                {field:'symbol',title:'symbol',width:100},
                {field:'trend',title:'trend',width:80},
                {field:'lots',title:'lots',width:100},
                {field:'price',title:'price',width:100},
                {field:'profit',title:'profit',width:100}
            ]]
        });	
     // ---------------------------------------------------------------------------
		$("#btnSearch").click(function(){
			var url = '/fx/history.json';
			$.get(url,{},function(){
				$('#historyGrid').datagrid('reload');
			});			
		});
		$("#btnSave").click(function(){
			var row = $('#historyGrid').datagrid('getSelected');	
			///addTicket/{ticket}/{symbol}/{price}/{lots}/{profit}/{trend}
			var restful = $("#fm input[name=ticket]").val()+"/"+$("#fm input[name=symbol]").val()+"/"+$("#fm input[name=price]").val()+"/"+$("#fm input[name=lots]").val()+"/"+$("#fm input[name=profit]").val()+"/"+$("#fm input[name=trend]").val();
			var url = row.isNewRecord ? '/fx/addTicket/'+restful : '/fx/addTicket/'+restful;
			if (row){
				$.messager.confirm('Confirm','Do you want preceed?',function(r){
					if (r){
						var index = $('#historyGrid').datagrid('getRowIndex',row);
						$.get(url,{},function(){
							$('#historyGrid').datagrid('reload');
						});
					}
				});
			}
		});     

		
		$("#btnNew").click(function(){
			$('#historyGrid').datagrid('appendRow',{isNewRecord:true});
			var index = $('#historyGrid').datagrid('getRows').length - 1;
			$('#historyGrid').datagrid('selectRow', index);
			$('#historyGrid').form('clear');
		});
		
        $("#btnClear").click(function(){
        	$('#fm').form('clear')
        });
        
    });
	</script>
</head>
<body>
<div class="easyui-layout" fit="true">
	<div region="north" split="true" border="false" style="width:auto; height:320px;">
		<h2>History List</h2>
		<!-- Grid List -->
		<table id="historyGrid" data-options="fit:true,fitColumns:true" class="easyui-datagrid" 
		                 toolbar="#searchbar" pagination="false"
		                 rownumbers="true" singleSelect="true">
		</table>
    </div>
    <!-- //  Grid List -->
	<!-- // North Data Grid -->
	<div region="center" border="false">
	<!-- Edit form -->
	<div id="dlg" style="width:auto;height:auto;padding:10px 20px">
		<h1>Information</h1>
		<form id="fm" method="post">
			<table class="dv-table" style="width:100%;background:#fafafa;padding:5px;margin-top:5px;">
				<tr> 
					<td>Symbol</td>
					<td><input name="symbol" class="easyui-validatebox" required="true"></input></td>
					<td>Trend</td>
					<td><input name="trend" class="easyui-validatebox" required="true"></input></td>
					<td>Ticket</td>
					<td><input name="ticket" class="easyui-validatebox" required="true"></input></td>
				</tr>	
				<tr>
					<td>Lots</td>
					<td><input name="lots" class="easyui-validatebox" required="true"></input></td>
					<td>Price</td>
					<td><input name="price" class="easyui-validatebox" required="true"></input></td>
					<td>Profit</td>
					<td><input name="profit" class="easyui-validatebox" required="true"></input></td>
				</tr>					
			</table>
			<div id="dlg-buttons">
				<a href="#" id="btnSave" class="easyui-linkbutton" iconCls="icon-ok">Save</a>
				<a href="#" id="btnNew" class="easyui-linkbutton" iconCls="icon-add">New</a>
				<a href="#" id="btnDelete" class="easyui-linkbutton" iconCls="icon-no">Delete</a>
				<a href="#" id="btnClear" class="easyui-linkbutton" iconCls="icon-refresh">Clear</a>
			</div>
		</form>
	</div>
    <!-- // Edit form -->		
    </div>
</div>
<!--  Starch Tool bar -->
<div id="searchbar" style="padding:5px;height:auto">
<div>
        ID : <input id="id" type="text" name="id" style="width:80px">
        <a href="#" id="btnSearch" class="easyui-linkbutton" iconCls="icon-search">Search</a>
</div>
</div>
<!-- //  Search Tool bar -->


		
</body>
</html>